<template> 
    <div class="shop-info"> 
        <div class="info-content" v-if="info"> 
            <section class="section"> 
                <h3 class="section-title">配送信息</h3> 
                <div class="delivery"> 
                    <div> 
                        <span class="delivery-icon">{{info.description}}</span> 
                        <span>由商家配送提供配送，约{{info.deliveryTime}}分钟送达，距离 {{info.distance}}</span> 
                    </div> 
                    <div class="delivery-money">配送费￥{{info.deliveryPrice}}</div> 
                </div> 
            </section> 
            <div class="split"></div> 
            <section class="section"> 
                <h3 class="section-title">活动与服务</h3> 
                <div class="activity"> 
                    <div class="activity-item" v-for="(support,index) in info.supports" :key="index"
                    :class="supportClass[support.type]"> 
                        <span class="content-tag"> 
                        <span class="mini-tag">{{support.name}}</span> 
                        </span> 
                        <span class="activity-content">{{support.content}}</span>
                    </div> 
                </div> 
            </section> 
            <div class="split">
            </div> 
            <section class="section">
                <h3 class="section-title">商家实景</h3> 
                <div class="pic-wrapper"> 
                    <ul class="pic-list" ref="picUl"> 
                        <li class="pic-item" v-for="(pic,index) in info.pics" :key="index"> 
                            <img :src="pic"/> 
                        </li> 
                    </ul> 
                </div> 
            </section> 
            <div class="split"></div> 
            <section class="section">
                <h3 class="section-title">商家信息</h3> 
                <ul class="detail"> 
                    <li>
                        <span class="bold">品类</span> 
                        <span>{{info.category}}</span>
                    </li> 
                    <li>
                        <span class="bold">商家电话</span> 
                        <span>{{info.phone}}</span></li>
                    <li>
                        <span class="bold">地址</span> 
                        <span>{{info.address}}</span>
                    </li> 
                    <li>
                        <span class="bold">营业时间</span> 
                        <span>{{info.workTime}}</span>
                    </li> 
                </ul> 
            </section> 
        </div> 
    </div>
</template> 

<script> 
import BScroll from 'better-scroll'
import {mapState} from 'vuex'
export default {
    data() {
        return {
            supportClass:['activity-green','activity-red','activity-orange']
        }
    },
    computed: {
        ...mapState(['info'])
    },
    mounted() {
        // 此时 info 可能是一个空对象, 也可能是一个带数据的对象
        // 没有数据直接结束
        if(!this.info.pics){
            return 
        }
        this._initScroll()
    },
    methods: {
        _initScroll(){
         new BScroll('.shop-info')

         const ul = this.$refs.picUl
         const liWidth = 120
         const space = 6
         const size = this.info.pics.length
         // 指定图片 ul 的样式宽度(前提是有数据)
         ul.style.width = (liWidth + space)*size -space + 'px'

         new BScroll('.pic-wrapper',{
             click: true,
             scrollX:true //水平滑动
         })
        }
    },
    watch: {
        info(){
            // info 状态数据更新了, 但界面还没有真正更新
            this.$nextTick(()=>{
                this._initScroll()
            })
        }
    }
} 
</script> 

<style lang="stylus" rel="stylesheet/stylus"> 
@import "../../../assets/stylus/mixin.styl"
.shop-info 
    position: absolute  
    top: 11rem 
    bottom: 0 
    left: 0 
    width: 100% 
    background: #fff; 
    overflow: hidden 
    .section 
        padding 16px 14px 14px 
        font-size 16px 
        background-color #fff 
        color #666 
        border-bottom 1px solid #eee 
        position relative 
        .section-title 
            color #000 
            font-weight 700 
            > .iconfont 
                float right 
                color #ccc 
        .delivery
            margin-top 16px 
            font-size 13px 
            .delivery-icon 
                font-size 11px 
                margin 0  10px 4px 0
                display inline-block 
                text-align center 
                color #fff 
                background-color #41B883
                padding 2px 4px 
                border-radius 4px 
            .delivery-money 
                margin-top 5px 
        .activity 
            margin-top 16px 
            .activity-item 
                margin-bottom 12px 
                display flex 
                font-size 13px 
                align-items center 
                &.activity-green 
                    .content-tag 
                        background-color rgb(112, 188, 70)
                &.activity-red
                    .content-tag 
                        background-color rgb(240, 115, 115) 
                &.activity-orange 
                    .content-tag 
                         background-color: rgb(241, 136, 79) 
                .content-tag 
                    display inline-block 
                    border-radius 2px 
                    width 36px
                    padding 2px
                    line-height 18px
                    text-align center
                    margin-right 10px 
                    color #fff 
                    font-style normal 
                    position relative 
                        .mini-tag
                            position absolute 
                            left 0 
                            top 0 
                            right -100% 
                            bottom -100% 
                            font-size 24px 
                            transform scale(.5) 
                            transform-origin 0 0 
                            display flex 
                            align-items center 
                            justify-content center 
        .pic-wrapper 
            width: 100% 
            overflow: hidden 
            white-space: nowrap 
            margin-top 16px 
            .pic-list  
                font-size: 0
                .pic-item 
                    display: inline-block 
                    margin-right: 6px 
                    width: 120px 
                    height: 90px  
                    img
                        width: 120px 
                        height: 90px 
                &:last-child 
                    margin: 0 
        .detail 
            margin-bottom -16px 
            >li
                display flex 
                justify-content space-between 
                align-items center 
                margin-right -10px 
                padding 16px 12px 16px 0 
                line-height 16px 
                bottom-border-1px(#ddd) 
                font-size 13px 
                > .bold 
                    font-weight 700 
                    color #333 
            &:last-child 
                border-none()
    .split 
        width: 100%
        height: 16px 
        border-top: 1px solid rgba(7, 17, 27, 0.1) 
        border-bottom: 1px solid rgba(7, 17, 27, 0.1) 
        background: #f3f5f7
</style>